<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="../css/reset.css" />
        <link rel="stylesheet" type="text/css" href="../css/style.css" />
        <!-- <link rel="stylesheet" type="text/css" href="../css/header.css" /> -->
        <link rel="stylesheet" type="text/css" href="../css/swiper.css" />
        <link rel="stylesheet" type="text/css" href="../css/productDetails.css" />
        <!-- <link rel="stylesheet" type="text/css" href="../css/font-awesome-4.7.0/css/font-awesome.css" /> -->

        <script type="text/javascript" src="../js/flexible.debug.js"></script>

        <script type="text/javascript" src="../js/flexible_css.debug.js"></script>

        <script type="text/javascript" src="../js/jquery-2.1.4.min.js"></script>

        <script type="text/javascript" src="../js/swiper.jquery.min.js"></script>

    </head>
    <body>

        <header class="header">
            <span class="span"><img src="../img/fanhui.png"/></span>
            <span class="span">欧美气质连衣裙</span>
            <span class="span"><img src="../img/5 .png" height="47" width="44" alt="" /></span>
        </header>


        <main>
            <section>
                <div class="banner">
            <div class="swiper-container imgs">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="../img/banner.png"/>
                    </div>
                    <div class="swiper-slide">
                       <img src="../img/banner.png"/>
                    </div>
                    <div class="swiper-slide">
                        <img src="../img/banner.png"/>
                    </div>
                </div>
                <div class="swiper-pagination"></div>
                
            </div>
        </div>
            </section>
        

            <article>
               <h3>欧美经典气质连衣裙</h3> 
               <p class="jiage">￥399</p>
               <p class="jiangjie">
                   Lorem ipsum dolor sit amet,consectetur adipiscing elit,Aenean euismod bibendum laoreet.elit Aeneean euisod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.Proin sodales pulivinar tempor.Cum socils natoque penatibus et magnis dis parturient montes,nascetur ridiculus mus.
               </p>

            </article>

            <figure>
             <img src="../img/jiesao.png" class="jiesao" />
            </figure>





        </main>



        <footer class="footer">
            <!-- <ul>
                <li>
                    
                    
                    <img src="../img/4.png" height="46" width="46"/>
                    
                    <p>购买咨询</p>
                </li>
                <li>
                    <img src="../img/2.png" height="47" width="47"/>
                    <p>收藏</p>
                </li>
                <li>
                    <img src="../img/9.png" height="46" width="46"/>
                    <p>购物车</p>
                </li>
                <li>
                    <img src="../img/10.png" height="46" width="42"/>
                    <p>立即购买</p>
                </li>
            </ul> -->


            <dl class="zixun">
                <dt><img src="../img/4.png" height="46" width="46"/></dt>
                <dd>购买咨询</dd>
            </dl>


            <dl class="soucang">
                <dt><img src="../img/2.png" height="47" width="47"/></dt>
                <dd>收藏</dd>
            </dl>


            <dl class="shoppingCart">
                <dt><img src="../img/9.png" height="46" width="46"/></dt>
                <dd>购物车</dd>
            </dl>

            <dl class="buy">
                <dt><img src="../img/10.png" height="46" width="42"/></dt>
                <dd>立即购买</dd>
            </dl>
        </footer>







        <script>
        
             $(function($){
            
            
            var swiper1 = new Swiper('.swiper-container', {
                autoplay: 1000,
                pagination: '.swiper-pagination',
                scrollbarHide: true,
                autoplayDisableOnInteraction : false,
                loop: true
            });
            
            $(function(){
                $('.footer dl').click(function(){
                   $(this).addClass('curr').siblings().removeClass('curr');
                })


            })
            
            $(function(){
                 $('.zixun').click(function(){
                  location.href="messageConcent.html";
                });
                  $('.soucang').click(function(){
                  location.href="collection.html";
                });
                   $('.shoppingCart').click(function(){
                  location.href="shoppingCart.html";
                });
                    $('.buy').click(function(){
                  location.href="confirmOrder.html";
                });
            })
         })
        </script>

        

    </body>
</html>